<template>
  <el-dialog
      top="5vh"
      width="1000px"
      title="公告详情"
      :visible.sync="dialogValue"
      :close-on-click-modal="false"
      append-to-body
  >
    <div class="notice-detail">
      <!-- 公告基本信息 -->
      <el-card class="notice-info" shadow="never">
        <div slot="header">
          <span>公告基本信息</span>
        </div>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="公告ID">{{ currentNotice.id }}</el-descriptions-item>
          <el-descriptions-item label="公告位置">
            <el-tag v-if="currentNotice.position === 'interview'" type="primary">面试</el-tag>
            <el-tag v-else-if="currentNotice.position === 'written'" type="success">笔试</el-tag>
            <el-tag v-else type="info">{{ currentNotice.position }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag v-if="currentNotice.status === 1" type="success">启用</el-tag>
            <el-tag v-else type="info">禁用</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="排序">{{ currentNotice.sort }}</el-descriptions-item>
          <el-descriptions-item label="浏览次数">{{ currentNotice.view_count }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ formatDateTime(currentNotice.create_time) }}</el-descriptions-item>
          <el-descriptions-item label="是否置顶">
            <el-tag v-if="currentNotice.is_top === 1" type="danger">是</el-tag>
            <el-tag v-else type="info">否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="是否推荐">
            <el-tag v-if="currentNotice.is_recommend === 1" type="warning">是</el-tag>
            <el-tag v-else type="info">否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ formatDateTime(currentNotice.update_time) }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 公告标题 -->
      <el-card class="notice-title" shadow="never">
        <div slot="header">
          <span>公告标题</span>
        </div>
        <div class="title-content">
          <el-tag v-if="currentNotice.is_top === 1" type="danger" size="small" style="margin-right: 10px;">置顶</el-tag>
          <el-tag v-if="currentNotice.is_recommend === 1" type="warning" size="small" style="margin-right: 10px;">推荐</el-tag>
          <span class="title-text">{{ currentNotice.title }}</span>
        </div>
      </el-card>

      <!-- 公告内容 -->
      <el-card class="notice-content" shadow="never">
        <div slot="header">
          <span>公告内容</span>
        </div>
        <div class="content-text" v-html="currentNotice.content"></div>
      </el-card>

      <!-- 时间信息 -->
      <el-card class="notice-time" shadow="never">
        <div slot="header">
          <span>时间信息</span>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="开始时间">{{ formatDateTime(currentNotice.start_time) || '无限制' }}</el-descriptions-item>
          <el-descriptions-item label="结束时间">{{ formatDateTime(currentNotice.end_time) || '无限制' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 状态信息 -->
      <el-card class="notice-status" shadow="never">
        <div slot="header">
          <span>状态信息</span>
        </div>
        <div class="status-info">
          <p><strong>当前状态：</strong>
            <el-tag v-if="currentNotice.status === 1" type="success">启用</el-tag>
            <el-tag v-else type="info">禁用</el-tag>
          </p>
          <p><strong>置顶状态：</strong>
            <el-tag v-if="currentNotice.is_top === 1" type="danger">置顶</el-tag>
            <el-tag v-else type="info">普通</el-tag>
          </p>
          <p><strong>推荐状态：</strong>
            <el-tag v-if="currentNotice.is_recommend === 1" type="warning">推荐</el-tag>
            <el-tag v-else type="info">普通</el-tag>
          </p>
          <p><strong>显示时间：</strong>
            <span v-if="currentNotice.start_time && currentNotice.end_time">
              {{ formatDateTime(currentNotice.start_time) }} 至 {{ formatDateTime(currentNotice.end_time) }}
            </span>
            <span v-else-if="currentNotice.start_time">
              从 {{ formatDateTime(currentNotice.start_time) }} 开始
            </span>
            <span v-else-if="currentNotice.end_time">
              截止到 {{ formatDateTime(currentNotice.end_time) }}
            </span>
            <span v-else>永久显示</span>
          </p>
        </div>
      </el-card>
    </div>
  </el-dialog>
</template>

<script>
import {http} from '@/api'

export default {
  name: 'NoticeView',
  data() {
    return {
      dialogValue: false,
      currentNotice: {}
    }
  },
  methods: {
    formatDateTime(dateTime) {
      if (!dateTime) return '';
      return new Date(dateTime).toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    },
    open(row) {
      this.currentNotice = row;
      this.dialogValue = true;
    }
  }
}
</script>

<style scoped lang="scss">
.notice-detail {
  .notice-info {
    margin-bottom: 20px;
  }
  .notice-title {
    margin-bottom: 20px;
    .title-content {
      display: flex;
      align-items: center;
      .title-text {
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
  .notice-content {
    margin-bottom: 20px;
    .content-text {
      padding: 15px;
      background-color: #f5f7fa;
      border-radius: 4px;
      line-height: 1.8;
      min-height: 200px;
    }
  }
  .notice-time {
    margin-bottom: 20px;
  }
  .notice-status {
    margin-bottom: 20px;
    .status-info {
      p {
        margin-bottom: 10px;
        line-height: 1.6;
      }
    }
  }
}
</style> 